import { useEffect, useState } from 'react'

function UseEffect() {
	const [count, setCount] = useState(0)
	const [count2, setCount2] = useState(0)

	// 1. 没有依赖项: 组件初始渲染 | 组件所有状态变化时都会执行
	// useEffect(() => {
	// 	console.log('useEffect')
	// })

	// 2. 空数组依赖项: 只在组件初始化渲染时执行一次
	// useEffect(() => {
	// 	console.log('useEffect')
	// }, [])

	// 3. 指定依赖项: 组件初始渲染 | 特定依赖项状态变化时会执行
	useEffect(() => {
		console.log('useEffect')
	}, [count])

	return (
		<>
			<h2>UseEffect依赖项</h2>
			<button onClick={() => setCount(count + 1)}>更新组件count值+1：{count}</button>
			<button onClick={() => setCount2(count2 + 1)}>更新组件count2值+1：{count2}</button>
		</>
	)
}

export default UseEffect
